import { Component } from 'react';
import { msgNoData } from '../../../app/variables';
import DB from '../../../app/db';
import Topic from './itemTopic';
import {  Boxs } from 'saltui';
const { HBox, Box } = Boxs;

import './PageHome.less';

export default class PageHome extends Component {

  constructor(props) {
    super(props);
    let canToAnswer=props.params.canToAnswer;
    if(canToAnswer=='true'){
      canToAnswer=true;
    }else if(canToAnswer=='false'){
      canToAnswer=false;
    }
    this.state = {
      isDeleted:false,
      topicSetting:[],
      entity:{},
      grade:0,
      ranking:0,
      answerCount:0,
      rightNum:0,
      canToAnswer:canToAnswer
    }
  }
  componentDidUpdate(){
    $("#titleDes").html(this.state.entity.titleDescription);
  }
  componentWillMount(){
    let t = this;
    DB.QuesModuleAPI.getDingQuesInfo({
      id: t.props.params.id,
      anUserId: t.props.params.userId,
      isAnwser:'1'
    }).then((content) => {
      let isDeleted = content.isDeleted;
      if(isDeleted){
        t.setState({
          isDeleted:isDeleted
        })
        return false;
      }
      if(content != null){
        let rightNum = t.getRightNum(content.topicSetting);
        t.setState({
          topicSetting: content.topicSetting,
          entity: content.entity,
          grade: content.grade,
          answerCount: content.answerCount,
          ranking: content.ranking,
          rightNum:rightNum
        })
      }
      
    }).catch((error) => {
      console.error(error);
    });
  }

  getRightNum(topicSetting){
    let rightNum = 0;
    for(let i = 0; i < topicSetting.length; i++){
      let data = topicSetting[i];
      let list = data.list;
      let settingMap = data.settingMap;
      let topicType = data.topicType;
      let flag = true;
      for(let j = 0; j < list.length; j++){
        let item = list[j];
        if(topicType == 'sinselect' || topicType == 'trueOrFalse'){
          if(item.mapSet.isRightAnswer == '1' && item.id == item.answer.answer)
            rightNum++;
        }else if(topicType == 'multiselect'){
          if((item.mapSet.isRightAnswer == '1' && item.id != item.answer.answer) || (item.mapSet.isRightAnswer != '1' && item.id == item.answer.answer))
            flag = false;
        }else if(topicType == 'answer'){
          if(settingMap.answer == list[0].answer.answer) 
            rightNum++;
        }else if(topicType == 'shortAnswer' || topicType == 'field'){
          if(settingMap.topicScore == list[0].answer.fraction) 
            rightNum++;
        }else if(topicType == 'fillInBlanks'){
          if(item.mapSet.answer != item.answer.answer) 
            flag = false;
        }
      }
      if((topicType == 'multiselect' || topicType == 'fillInBlanks') && flag) rightNum++;
    }
    return rightNum;
  }

  render() {
    let t = this;
    let isDeleted = t.state.isDeleted;
    let titleDescription = t.state.entity.titleDescription;
    if(!isDeleted){
      return (
        <div className="t-PL16 t-PR16 t-LH1_4 t-BCf">
          <h1 className="t-FS18 t-FAC t-PT20 t-FC3 t-PB12"><b>{t.state.entity.name}</b></h1>
          <p id="titleDes" className={titleDescription != null && titleDescription != "" ? "t-FCddfontblue-60 t-PB20 t-FS16" : "t-DN"}></p>
          <HBox className="t-PB20" style={{marginLeft:"-7",marginRight:"-7"}}>
            <Box flex={1} className="dd-score-bg">
              <HBox style={{alignItems:"baseline"}} className="t-FBJC t-MB6">
                <Box className="t-FS24 t-FC3"><b>{t.state.grade}</b></Box>            
                <Box>/</Box>
                <Box>{t.state.entity.sumScore}</Box>
              </HBox>
              <Box className="dd-score-t">
                得分
              </Box>
            </Box>
            <Box flex={1} className="dd-score-bg">
              <HBox style={{alignItems:"baseline"}} className="t-FBJC t-MB6">
                <Box className="t-FS24 t-FC3"><b>{t.state.ranking}</b></Box>            
                <Box>/</Box>
                <Box>{t.state.answerCount}</Box>
              </HBox>
              <Box className="dd-score-t">
              名次
              </Box>
            </Box>
            <Box flex={1} className="dd-score-bg">
              <HBox style={{alignItems:"baseline"}} className="t-FBJC t-MB6">
                <Box className="t-FS24 t-FC3"><b>{t.state.rightNum}</b></Box>            
                <Box>/</Box>
                <Box>{t.state.entity.sumTopicNum}</Box>
              </HBox>
              <Box className="dd-score-t">
              答对题数
              </Box>
            </Box>
          </HBox>
          {
            t.state.topicSetting.map(function(item,i){
              return (
                  <Topic data={item} topicNo={i+1} canToAnswer={this.state.canToAnswer}/>
                )
            }.bind(this))
          }
        </div>)  
    }else{
      return (
        <div className="dd-state-page">
          <div className="dd-state-box">
            <VBox hAlign="center">
              <Box>
                <div>
                  <img src={msgNoData} alt="" />
                </div>
              </Box>
              <Box className="t-FS14 t-MT30 t-FAC t-LH1_3 t-FCddfontblue-40">
                内容已删除
              </Box>
            </VBox>
          </div>
        </div>
      )
    }     
  }
}




